//------------------------------------------------------------------------------
// Draggables
//------------------------------------------------------------------------------

.vue-draggable {
  background: #fff;
  border: 4px solid $gray-600;
  border-radius: $border-radius;
  overflow: hidden; // Need to cut off text (because it doesn't wrap)

  .vue-draggable-muted {
    color: $text-muted; // Can't rely on text-muted as we need to override on hover
  }

  &:hover {
    background: $purple !important; // Override availability mark
    border-color: darken($purple, 7.5%) !important; // Override trainee mark
    cursor: move;
    color: #fff;

    .vue-draggable-muted {
      color: #fff; // Can't rely on text-muted as we need to override on hover
    }

    .vue-draggable {
      color: $body-color; // Don't highlight draggable items within this one
      .vue-draggable-muted {
        color: $text-muted;
      }
    }
  }

  &.vue-draggable-child {
    border-color: lighten($gray-600, 20%); // Lighten panel draggable
  }

  &.vue-draggable-locked {
    opacity: 0.33;
    pointer-events: none;
  }
}

.vue-droppable {
  background: $droppable-bg;

  &.vue-droppable-parent {
    background: lighten($droppable-bg, 2%); // Lighten panel draggable
  }

  &.vue-droppable-locked {
    background: #fff;
    position: relative; // For the spinner
  }
}

.vue-is-hovering {
  @include hover-highlights(#000);
}

.vue-is-dragging { // :active is the 'ghost' drag element
  opacity: 0.66 !important;
  @include hover-highlights(#000);
}

//------------------------------------------------------------------------------
// Droppables
//------------------------------------------------------------------------------

.vue-droppable-enter {
  background: theme-color("success") !important;
}

//------------------------------------------------------------------------------
// Resizeable
//------------------------------------------------------------------------------

.unallocated-items {
  height: 100%;
  width: 100%;
  z-index: $z_3; // Need to hover abovve underlying .tooltips

  > div {
    display: inline-flex;
  }
}

.sort-handler {
  margin-left: auto;
}
